<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <style>
        /* 如果你想在输入框中添加图标，可以使用 background-image 属性和用于定位的background-position 属性。
        注意设置图标的左边距，让图标有一定的空间： */
        input[type=text] {
            width: 100%;
            box-sizing: border-box;
            border: 2px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
            background-color: white;
            background-image: url('http://static.runoob.com/images/mix/searchicon.png');
            background-position: 10px 10px;
            background-repeat: no-repeat;
            padding: 12px 20px 12px 40px;
        }
    </style>
</head>

<body>

    <p>输入框按钮:</p>

    <form>
        <input type="text" name="search" placeholder="搜索..">
    </form>

</body>

</html>